<template>
  <div class="hyydxq">
    <!-- 预约信息 -->
    <van-search clearable background="transparent" v-model="params.name" class="b-b-2" placeholder="请输入关键词进行搜索" @search="onSearch" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-radio-group change="changes" v-model="radio">
        <van-cell v-for="(item, key) in list" :key="key" class="approvalItem content">
          <!-- <div class="flex-between font-14 line-height-3">
            <div class="col-333333 font-bold-500 font-15 m-r-10">{{item.name}}</div>
            <div class="col-999999 line-text-out text-right">剩余：200g</div>
          </div> -->
          <div class="flex-between font-13 line-height-3">
            <div class="col-666666 m-r-10 line-text-out">
                <p class="col-333333 font-bold-500 font-15">{{item.name}}</p>
                <!-- <p>采购时间：{{item.createTime}}</p>
                <p>生产厂商：XXX</p>
                <p>批号/加工日期：XXXXX</p> -->
            </div>
             <van-radio checked-color="#37B5B5" @click="selectProduct(item)" :name="key"></van-radio>
          </div>
        </van-cell>
        </van-radio-group>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
//保养记录
import { getValue ,setValue} from '@/utils/auth'
import { Toast, Cell, CellGroup, Popup, Picker, DatetimePicker, PullRefresh, List ,Search,RadioGroup, Radio} from 'vant'
import { getHandle, postHandle } from '@/api'
import dayjs from 'dayjs'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast,
    [List.name]: List,
    [Search.name]: Search,
    [RadioGroup.name]:RadioGroup,
    [Radio.name]:Radio
  },
  data() {
    return {
      radio:'',
      keyword:'',
      refreshing: false,
      currentDate: new Date(),
      list: [],
      loading: false,
      finished: false,
      params: {
        page: 1,
        perPage: 3,
        name: "",
        typeCode: ""
      },
      swFlag:getValue('swFlag') || '',
      productId: getValue('productId') || ''
    }
  },
  watch: {},
  created() {},
  mounted() {


  },
  methods: {
    selectProduct(item){

      if (this.swFlag == 'swAdd') {
          setValue('productName',item.name)
          } else {
            setValue('productEdit', item.name)
         }
      this.$bridge.call('base.closePage')
    },
    // 卡片列表
    onRefresh() {
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onSearch() {
      this.params.page = 1
      this.list = []
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      getHandle('/agri/api/yzbzh/drugInfo/queryListPage', this.params).then(res => {
        console.log(res);
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        this.list = this.list.concat(res.data.rows)
        this.loading = false
        if(this.swFlag !== 'swAdd'){
          this.radio = this.list.map(item => item.name).indexOf(getValue('productName') || '')
        }
        if (this.list.length >= res.data.count) {
          this.finished = true
        } else {
          this.params.page = this.params.page + 1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.topCeiling {
  position: fixed;
  top: 0;
  z-index: 1;
}
.van-field__control {
  border: 0 !important;
}
.content {
  //   border-bottom: 1px solid #eee;
  padding: 10px 15px;
}
::v-deep .van-search{
    width: 98%;
    margin: auto;
}
::v-deep .van-search__content{
    background-color: #fff;
    border-radius: 34px;

}
</style>
